<script setup>
import { ref, reactive, computed } from 'vue';
import { reqInquireFileNote } from '@/api/teacher/record/file';
import todoListItem from '@/component/todoListItem.vue';

const options = [
    {
        label: '全部',
        value: '0&states=6&states=7'
    },
    {
        label: '待审核',
        value: '0'
    },
    {
        label: '已通过',
        value: '6'
    },
    {
        label: '未通过',
        value: '7'
    }
];

// 下拉加载
const load = () => {
    loading.value = true;
    if (list.value.length) {
        inquire();
    }
};

// 是否显示加载中
const loading = ref(false);

// 是否提示todolist没有更多数据
const noMore = ref(true);

// 在加载时和没有数据的时候不能继续使用下拉加载
// (可以理解为在加载时和没多数据时不能使用load方法)
const disabled = computed(() => loading.value || noMore.value);

const list = ref([]);

let pageNo = 1;
let pageSize = 5;

const activeName = ref('1');

const now = new Date();

const fileNote = reactive({
    type: options[0].value,
    date: `${now.getFullYear()}/${now.getMonth()}/${now.getDate()}`
});

const inquire = async () => {
    const date =
        fileNote.date ||
        `${now.getFullYear()}/${now.getMonth()}/${now.getDate()}`;
    const selectDateString = date;
    const tomorrow = new Date(selectDateString);
    tomorrow.setMonth(tomorrow.getMonth() + 1);
    tomorrow.setDate(tomorrow.getDate() + 1);
    let month = tomorrow.getMonth().toString();
    month = month.length == 1 ? '0' + month : month;
    let d = tomorrow.getDate().toString();
    d = d.length == 1 ? '0' + d : d;
    const tomorrowDateString = `${tomorrow.getFullYear()}/${month}/${d}`;

    console.log(selectDateString, tomorrowDateString);

    const result = await reqInquireFileNote(
        pageNo,
        pageSize,
        fileNote.type,
        selectDateString,
        tomorrowDateString
    );

    if (result.status == 200) {
        list.value.push(...result.dataList);
    } else {
        throw new Error(result.statusText);
    }
};
</script>

<template>
    <div class="container">
        <el-collapse v-model="activeName" class="collapse">
            <el-collapse-item name="1">
                <template #title>
                    <span class="collapse__title"> 筛选 </span>
                </template>
                <el-form size="large">
                    <el-form-item label="类型" class="form-item">
                        <el-select v-model="fileNote.type" class="form-item">
                            <el-option
                                v-for="option in options"
                                :value="option.value"
                                :label="option.label"
                                :key="option.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间" class="form-item">
                        <el-date-picker
                            v-model="fileNote.date"
                            size="large"
                            format="YYYY/MM/DD"
                            value-format="YYYY/MM/DD"
                            :editable="false"
                            validate-event
                            class="form-item"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="inquire"
                            >查询</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-collapse-item>
        </el-collapse>
        <div class="content">
            <ul
                class="todoList"
                v-infinite-scroll="load"
                :infinite-scroll-disabled="disabled"
                infinite-scroll-distance="10"
            >
                <todoListItem
                    :list="list"
                    :leaveType="'档案预约申请'"
                ></todoListItem>
                <div v-if="loading" class="loading" v-loading="loading"></div>
                <div v-if="noMore" class="no-more">没有更多数据了</div>
            </ul>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 16rem;
    background-color: rgb(247, 247, 247);
}

.collapse {
    margin: 0 20rem;
    z-index: 999;

    &__title {
        font-size: 18rem;
        font-weight: 600;
    }
}

.form-item {
    width: 100%;
}

.content {
    position: relative;
    flex: 1;
    font-size: 10rem;
    overflow: auto;
}

.todoList {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 20rem;
    overflow: auto;
    padding: 0 20rem;
    padding-top: 5rem;

    .loading {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10rem;
        font-size: large;
        margin-top: 20rem;
        background-color: #bbb;
    }

    .no-more {
        width: 100%;
        height: 10rem;
        margin-top: 20rem;
        font-size: 14rem;
        color: #999;
        text-align: center;
    }
}
</style>
